window.onload = function() {

    //--------移动/pc通用代码： start-----------------------------------------------------------------------------------
    var todo = document.querySelector('.todo');
    var todo_lis = todo.querySelectorAll('li');
    var hasdown = document.querySelector('.hasdown');
    var hasdown_lis = hasdown.querySelectorAll('li');
    var today_op_delete = document.querySelectorAll('.content_right_today .todo .delete');
    var span1 = document.querySelector('.todayTodo_nav p span');
    var span2 = document.querySelector('.longTodo_nav p span');
    var ing_lis = document.querySelectorAll('.ing .todo li');
    var will_lis = document.querySelectorAll('.will .todo li');
    var down_lis = document.querySelectorAll('.down .hasdown li');
    var ing_span = document.querySelector('.ing h3 span:first-child span');
    var will_span = document.querySelector('.will h3 span:first-child span');
    var down_span = document.querySelector('.down h3 span:first-child span');
    let yes = document.querySelector('.add_todayTodo .yes');
    let today_name = document.querySelector('.add_todayTodo .name');
    let today_time = document.querySelector('.add_todayTodo .time');
    let today_classify = document.querySelector('.add_todayTodo .classify');
    let today_import = document.querySelector('.add_todayTodo .import');
    loadTodayData();
    // slide(todo_lis[i], getPercentage);
    loadTodayData2()

    Todaywancheng();
    deleteTodayData2();
    // window.location.href = window.location.href;

    //添加今日计划
    yes.addEventListener('click', function() {
        // 读取本地存储原来的数据
        var local1 = getData('today_ing');
        // 更新local1数据 最新的今日计划数据追加给local1数组
        local1.push({
            name: today_name.value,
            time: today_time.value,
            classify: today_classify.value,
            import: today_import.value,
            // done: false

        });
        saveData('today_ing', local1);
        loadTodayData();
        getPercentage();
        Todaywancheng();
        deleteTodayData();
        // window.location.href = '/';

    });
    //点击完成计划  更新本地存储：删除todo中，将该li加到hasdown中
    var today_op_wancheng = document.querySelectorAll('.content_right_today .todo .topping');

    function Todaywancheng() {
        today_op_wancheng = document.querySelectorAll('.content_right_today .todo .topping');
        for (let i = 0; i < today_op_wancheng.length; i++) {
            today_op_wancheng[i].addEventListener('click', function() {
                var index = this.parentNode.parentNode.getAttribute('index');
                today_op_wancheng[i].parentNode.parentNode.parentNode.removeChild(today_op_wancheng[i].parentNode.parentNode);
                lis = document.querySelectorAll('.content_right_today .todo li');
                for (let i = 0; i < lis.length; i++) {
                    lis[i].setAttribute('index', i);
                }
                //先获取本地存储
                var data = getData('today_ing');
                //修改数据
                //去出today_down 中数据，将已完成的数据追加到today_down中


                var data2 = getData('today_down');
                data2.push(data[index]);
                saveData('today_down', data2);


                //更新今日计划已完成部分的内容
                var ul = document.querySelector('.content_right_today .hasdown');
                ul.innerHTML += '<li index =' + index + '>' +
                    '<div>' +
                    '<span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>' + data[index].name + '</span></span>' +
                    '<span class="todo_right">' +
                    '<span >' +
                    '<em><span>' + data[index].time + '</span>min</em>' +
                    '<em>' + data[index].classify + '</em>' +
                    '<em>' + data[index].import+'</em>' +
                    '</span>' +
                    '</div>' +
                    '<span class="operations">' +
                    '<a href="javascript:;" class="topping">取消</a>' +
                    '<a href="javascript:;" class="delete" >删除</a>' +
                    '</span>' +
                    '</li>';


                data.splice(index, 1);
                //保存到本地存储
                saveData('today_ing', data);
                getPercentage();

                //给今日已完成计划的 删除 绑定点击事件
                deleteTodayData2();
                cencel();

            });
        }
        // window.location.href = window.location.href;
    }


    //数据本地存储---------------------------------------------------------------------------------------------------
    //渲染今日已完成计划界面
    function loadTodayData2() {
        //获取本地存储中的今日已完成计划
        let data2 = getData('today_down');
        var ul = document.querySelector('.content_right_today .hasdown');

        //遍历之前先清空li
        ul.innerHTML = '';

        data2.forEach(function(d, index, arr) {

            ul.innerHTML += '<li index =' + index + '>' +
                '<div>' +
                '<span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>' + d.name + '</span></span>' +
                '<span class="todo_right">' +
                '<span >' +
                '<em><span>' + d.time + '</span>min</em>' +
                '<em>' + d.classify + '</em>' +
                '<em>' + d.import+'</em>' +
                '</span>' +
                '</div>' +
                '<span class="operations">' +
                '<a href="javascript:;" class="topping">取消</a>' +
                '<a href="javascript:;" class="delete" >删除</a>' +
                '</span>' +
                '</li>';
        });
        // deleteTodayData();
        // Todaywancheng()

    }
    //取消完成
    function cencel() {
        var today_op_cancel = document.querySelectorAll('.content_right_today .hasdown .topping');
        for (let i = 0; i < today_op_cancel.length; i++) {
            today_op_cancel[i].addEventListener('click', function() {

                today_op_cancel[i].parentNode.parentNode.parentNode.removeChild(today_op_cancel[i].parentNode.parentNode);
                lis = document.querySelectorAll('.content_right_today .hasdown li');
                for (let i = 0; i < lis.length; i++) {
                    lis[i].setAttribute('index', i);
                }
                var index = this.parentNode.parentNode.getAttribute('index');
                //先获取本地存储
                var data2 = getData('today_down');
                //修改数据
                //去出today_down 中数据，将已完成的数据追加到today_down中


                var data = getData('today_ing');
                data.push(data2[index]);
                saveData('today_ing', data);


                //更新今日计划未完成部分的内容
                var ul = document.querySelector('.content_right_today .todo');
                ul.innerHTML += '<li index =' + index + '>' +
                    '<div>' +
                    '<span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>' + data2[index].name + '</span></span>' +
                    '<span class="todo_right">' +
                    '<span >' +
                    '<em><span>' + data2[index].time + '</span>min</em>' +
                    '<em>' + data2[index].classify + '</em>' +
                    '<em>' + data2[index].import+'</em>' +
                    '</span>' +
                    '</div>' +
                    '<span class="operations">' +
                    '<a href="javascript:;" class="topping">完成</a>' +
                    '<a href="javascript:;" class="edit">编辑</a>' +
                    '<a href="javascript:;" class="delete" >删除</a>' +
                    '</span>' +
                    '</li>';




                data2.splice(index, 1);
                //保存到本地存储
                saveData('today_down', data2);
                getPercentage();

                //给今日已完成计划的 删除 绑定点击事件
                Todaywancheng();
                deleteTodayData();

            });
        }


    }
    //获取本地存储中的今日计划函数 name:本地存储名称
    function getData(name) {
        var Data = localStorage.getItem(name);
        if (Data !== null) {
            return JSON.parse(Data);
        } else return [];
    }
    //更新今日计划本地存储函数
    function saveData(name, data) {
        localStorage.setItem(name, JSON.stringify(data));
    }
    //渲染今日计划本地存储函数
    function loadTodayData() {
        //获取本地存储中的今日计划
        let data = getData('today_ing');
        var ul = document.querySelector('.content_right_today .todo');

        //遍历之前先清空li
        ul.innerHTML = '';

        data.forEach(function(d, index, arr) {

            ul.innerHTML += '<li index =' + index + '>' +
                '<div>' +
                '<span class="todo_left"><a href="javascript:;"> </a> &nbsp;&nbsp;&nbsp;&nbsp; <span>' + d.name + '</span></span>' +
                '<span class="todo_right">' +
                '<span >' +
                '<em><span>' + d.time + '</span>min</em>' +
                '<em>' + d.classify + '</em>' +
                '<em>' + d.import+'</em>' +
                '</span>' +
                '</div>' +
                '<span class="operations">' +
                '<a href="javascript:;" class="topping">完成</a>' +
                '<a href="javascript:;" class="edit">编辑</a>' +
                '<a href="javascript:;" class="delete" >删除</a>' +
                '</span>' +
                '</li>';
        });
        // deleteTodayData();
        // Todaywancheng()

    }

    //删除今日计划函数
    var lis = document.querySelectorAll('.content_right_today .todo li');

    function deleteTodayData() {
        today_op_delete = document.querySelectorAll('.content_right_today .todo .delete');

        for (let i = 0; i < today_op_delete.length; i++) {
            today_op_delete[i].addEventListener('click', function() {
                var index = this.parentNode.parentNode.getAttribute('index');
                today_op_delete[i].parentNode.parentNode.parentNode.removeChild(today_op_delete[i].parentNode.parentNode);
                lis = document.querySelectorAll('.content_right_today .todo li');
                for (let i = 0; i < lis.length; i++) {
                    lis[i].setAttribute('index', i);
                }
                //先获取本地存储
                var data = getData('today_ing');
                //修改数据

                data.splice(index, 1);
                //保存到本地存储
                saveData('today_ing', data);
                getPercentage();
            });
        }
    }

    function deleteTodayData2() {
        var today_op_delete2 = document.querySelectorAll('.content_right_today .hasdown .delete');
        for (let i = 0; i < today_op_delete2.length; i++) {
            today_op_delete2[i].addEventListener('click', function() {
                var index = this.parentNode.parentNode.getAttribute('index');
                today_op_delete2[i].parentNode.parentNode.parentNode.removeChild(today_op_delete2[i].parentNode.parentNode);
                lis = document.querySelectorAll('.content_right_today .hasdown li');
                for (let i = 0; i < lis.length; i++) {
                    lis[i].setAttribute('index', i);
                }
                //先获取本地存储
                var data = getData('today_down');
                //修改数据

                data.splice(index, 1);
                //保存到本地存储
                saveData('today_down', data);
                getPercentage();
            });
        }
    }


    //获取本地存储中的长期计划
    // function getLongData() {
    //     var LongData = localStorage.getItem('longTodolist');
    //     if (LongData !== null) {
    //         return JSON.parse(LongData);
    //     } else return [];
    // }
    // //更新长期计划本地存储
    // function saveLongData(data) {
    //     localStorage.setItem('longTodolist', data);
    // }
    // //渲染长期计划本地存储
    // function loadLongData() {
    //     //获取本地存储中的今日计划
    //     var data = getLongData();
    //     // console.log(data);
    // }
    //数据本地存储---------------------------------------------------------------------------------------------------
    //开始日期与结束日期表单联动
    var input_dates = document.querySelectorAll('input[type="date"]');
    input_dates[0].addEventListener('blur', function() { //先选择开始日期，再选择结束日期
        input_dates[1].min = this.value; //当选完开始日期后，将其值赋给结束日期的最小值
    });
    // (完成个数/总个数)计算函数：
    function getPercentage() {
        //今日计划(完成个数/总个数)计算：
        todo_lis = todo.querySelectorAll('li');
        hasdown_lis = hasdown.querySelectorAll('li');
        ing_lis = document.querySelectorAll('.ing .todo li');
        will_lis = document.querySelectorAll('.will .todo li');
        down_lis = document.querySelectorAll('.down .hasdown li');
        percentage([hasdown_lis, todo_lis], span1)
            //长期计划(完成个数/总个数)计算：
        percentage([down_lis, ing_lis, will_lis], span2);
        percentage([ing_lis, down_lis, will_lis], ing_span);
        percentage([will_lis, ing_lis, down_lis], will_span);
        percentage([down_lis, ing_lis, will_lis], down_span);
    }
    getPercentage();

    //--------移动/pc通用代码： end--------------------------------------------------------------------------------------





    var isPC = IsPC(); //判断是移动端/pc端
    if (!isPC) {
        //这里执行的是移动端的代码；**************************************************************************************
        // console.log("移动");
        //解决移动端input type=date placeholder不起作用的问题****未解决



        var longTodo_nav = document.querySelector('.longTodo_nav');
        var top_bar_wrapper = document.querySelector('.top-bar-wrapper');
        var content_left = document.querySelector('.content_left');
        let content_right_today = document.querySelector('.content_right_today');
        let content_right_long = document.querySelector('.content_right_long');
        let mask = document.querySelector('.mask');
        let header = document.querySelector('header');
        for (let i = 0; i < todo_lis.length; i++) {
            slide(todo_lis[i], getPercentage);
        }
        for (let i = 0; i < hasdown_lis.length; i++) {
            slide(hasdown_lis[i], getPercentage);
        }
        let but_addtoday = document.querySelector('.todayTodo_nav > span');
        but_addtoday.addEventListener('click', function(e) {
            let add_todayTodo = document.querySelector('.add_todayTodo');
            let yes = add_todayTodo.querySelector('.yes');
            let no = add_todayTodo.querySelector('.no');
            mask.style.display = 'block';
            add_todayTodo.style.display = 'block';
            e.preventDefault();
            no.addEventListener('click', function() { //点击x，则关闭创建窗口，取消创建
                mask.style.display = 'none';
                add_todayTodo.style.display = 'none';
            })
            yes.addEventListener('click', function() { //点击了√ 则成功创建一条长期计划??????????????????????????????????????????????????????????????????????????????
                mask.style.display = 'none';
                add_todayTodo.style.display = 'none';
            })
        });
        //移动端点击长期计划导航栏进入长期计划详情页面 start
        longTodo_nav.addEventListener('click', function() {
                top_bar_wrapper.style.display = 'none';
                content_left.style.display = 'none';
                content_right_today.style.display = 'none';
                content_right_long.style.display = 'flex';
                header.style.display = 'flex';
                longTodo();
                getPercentage(); //重新计算长期计划的 (已完成计划/总计划)
                let but_addlong = document.querySelector('header button');
                let go_back = document.querySelector('header span:first-of-type');
                // let mask = document.querySelector('.mask');
                let add_longTodo = document.querySelector('.add_longTodo');
                go_back.addEventListener('click', function() {
                    top_bar_wrapper.style.display = 'block';
                    content_left.style.display = 'block';
                    content_right_today.style.display = 'flex';
                    content_right_long.style.display = 'none';
                    header.style.display = 'none';
                    getPercentage(); //(已完成计划/总计划)渲染到首页

                });
                but_addlong.addEventListener('click', function() { //点击右上角＋，创建新的长期计划
                    mask.style.display = 'block';
                    add_longTodo.style.display = 'block';
                    let yes = add_longTodo.querySelector('.yes');
                    let no = add_longTodo.querySelector('.no');
                    no.addEventListener('click', function() { //点击x，则关闭创建窗口，取消创建
                        mask.style.display = 'none';
                        add_longTodo.style.display = 'none';
                    })
                    yes.addEventListener('click', function() { //点击了√ 则成功创建一条长期计划????????????????????????????????????????????????????????????????????
                        mask.style.display = 'none';
                        add_longTodo.style.display = 'none';


                    })

                })

            })
            //移动端点击长期计划导航栏进入长期计划详情页面 end


        // *************************************************************************************************************
    } else {
        //这里执行的是pc端的代码；........................................................................................
        // console.log("PC");
        // var longTodo_nav = document.querySelector('.longTodo_nav');
        var nav_father = document.querySelector('.content_left');
        nav_childs = nav_father.children;
        //点击左侧导航栏侧换内容，tab栏切换：
        for (let i = 0; i < nav_childs.length - 1; i++) {
            let content_right_today = document.querySelector('.content_right_today');
            let content_right_long = document.querySelector('.content_right_long');
            nav_childs[i].addEventListener('click', function() {
                for (let i = 0; i < nav_childs.length - 1; i++) {
                    nav_childs[i].style.backgroundColor = '#fff';
                }
                // console.log(nav_childs[i]);
                this.style.backgroundColor = '#81ccff';
                if (i === 0) { //i==0时显示今日计划模块，隐藏长期计划模块
                    content_right_today.style.display = 'block';
                    content_right_long.style.display = 'none';
                } else {
                    content_right_today.style.display = 'none';
                    content_right_long.style.display = 'block';
                }
            });

        }
        //创建新的长期计划
        let but_addlong = document.querySelector('.longTodo_nav > span');
        let mask = document.querySelector('.mask');
        let add_longTodo = document.querySelector('.mask .add_longTodo');
        but_addlong.addEventListener('click', function() { //点击右上角＋，创建新的长期计划
                mask.style.display = 'block';
                add_longTodo.style.display = 'block';
                let yes = add_longTodo.querySelector('.yes');
                let no = add_longTodo.querySelector('.no');
                no.addEventListener('click', function() { //点击x，则关闭创建窗口，取消创建
                    mask.style.display = 'none';
                    add_longTodo.style.display = 'none';
                })
                yes.addEventListener('click', function() { //点击了√ 则成功创建一条长期计划????????????????????????????????????????????????????????????????????
                    mask.style.display = 'none';
                    add_longTodo.style.display = 'none';


                })

            })
            //创建新的今日计划
        let but_addtoday = document.querySelector('.todayTodo_nav > span');
        let add_todayTodo = document.querySelector('.mask .add_todayTodo');
        but_addtoday.addEventListener('click', function(e) {
            // let add_todayTodo = document.querySelector('.add_todayTodo');
            let yes = add_todayTodo.querySelector('.yes');
            let no = add_todayTodo.querySelector('.no');
            mask.style.display = 'block';
            add_todayTodo.style.display = 'block';
            e.preventDefault();
            no.addEventListener('click', function() { //点击x，则关闭创建窗口，取消创建
                mask.style.display = 'none';
                add_todayTodo.style.display = 'none';
            })
            yes.addEventListener('click', function() { //点击了√ 则成功创建一条长期计划??????????????????????????????????????????????????????????????????????????????
                mask.style.display = 'none';
                add_todayTodo.style.display = 'none';
            })
        });
    }
    // .................................................................................................................

    let turnUserInfo = document.getElementById("turnUserInfo");
    turnUserInfo.addEventListener("click",turnUserInfos);
    function turnUserInfos(){
        // 获取页面尺寸，用于判断是移动端还是PC端
        let pageWidth = document.body.clientWidth;
        // 根据响应式布局分别跳转
        if (pageWidth >= 768) {
            location.href = "/view/other/modifyName.html";
        }else{
            location.href = "/view/other/userInfo.html";
        }
    }
}